<template>
  <Layout>
    <Spin fix v-if="isSpin">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>正在导出培训回执，请稍后</div>
    </Spin>
    <Form ref="form1" :model="form1" :label-width="120">
      <Row :gutter="16" class="query-form2" v-show="!switchFlag">
        <Col span="8">
          <FormItem label="单位名称：" prop="receiptOrgName">
            <cascaderDom class="query-form-el" style="padding-top: 4px;width: 100%"
                         @setOrgInfo="setOrgId1" @setOrgname="setOrgName1" ref="org1"
                         :currentOrgId="form1.receiptOrgId"
                         :currentOrgName="form1.receiptOrgName" :orgTree="true"></cascaderDom>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="联系人：" prop="userName">
            <Input class="query-form-el" type="text" v-model="form1.contactName"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <div style="float: right;">
            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
            <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text">
              展开
              <Icon type="ios-arrow-down"/>
            </Button>
          </div>
        </Col>
      </Row>
      <Row :gutter="16" v-show="switchFlag" class="query-form2">
        <Col span="8">
          <FormItem label="单位名称：" prop="receiptOrgName">
            <cascaderDom class="query-form-el" style="padding-top: 4px;width: 100%"
                         @setOrgInfo="setOrgId1" @setOrgname="setOrgName1" ref="org2"
                         :currentOrgId="form1.receiptOrgId"
                         :currentOrgName="form1.receiptOrgName" :orgTree="true"></cascaderDom>

          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="联系人：" prop="userName">
            <Input class="query-form-el" type="text" v-model="form1.contactName"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="通知公告：">
            <Input class="query-form-el" type="text" v-model="form1.noticName" @on-focus="querySelect"
                   :readonly="true"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16" v-show="switchFlag" class="query-form2">
        <Col span="8">
          <FormItem label="培训日期：">
            <Date-picker type="daterange" style="width: 100%" v-model="receiptDate"/>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="是否住宿：">
            <Select v-model="form1.accommodation" class="query-form-el">
              <Option value="1" key="1">是</Option>
              <Option value="0" key="0">否</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="参会方式：">
            <Select v-model="form1.meetingMode" class="query-form-el">
              <Option value="1" lable="视频参会">视频参会</Option>
              <Option value="2" lable="现场参会">现场参会</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16" v-show="switchFlag" class="query-form2">

        <Col span="8" offset="16">
          <div style="float: right;height:44px">
            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
            <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2"
                    type="text">收起
              <Icon type="ios-arrow-up"/>
            </Button>
          </div>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="downloadFiles">导出
          </Button>
        </Col>
      </Row>
    </Form>

    <Table ref='table' :height="tableHeight" :loading="loading" @on-selection-change='getSelectRows'
           border :columns="columns1" :data="dataTable">
    </Table>

    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
              @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
              show-total show-sizer show-elevator/>
      </Col>
    </Row>
    <Modal title="选择通知公告" :transfer=false footer-hide v-model="queryMeetingSelectModal" :width=900>
      <noticeSelect type="1" ref="selQueryMission" :is-select="true" @selectMission="queryMetting">
      </noticeSelect>
    </Modal>
    <Modal title="培训回执表新增" :transfer=false v-model="model1" :width=1200>
      <Row>
        <Col span="24">
          <Form ref="form1datacopy1" :model="form1datacopy" :rules="ruleCustom" label-position="top">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="通知公告：" prop="informId">
                  <Input type='text' v-model='form1datacopy.informName' readonly
                         @on-focus="openSelect"></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="单位名称：" prop="receiptOrgId">
                  <cascaderDom ref="org"
                               class="query-form-el" style="padding-top: 4px;width: 100%"
                               @setOrgInfo="setOrgId" @setOrgname="setOrgName"
                               :currentOrgId="form1datacopy.receiptOrgId"
                               :currentOrgName="form1datacopy.receiptOrgName"
                               :orgTree="true"></cascaderDom>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="联系人：" prop="contactName">
                  <Input type="text" v-model="form1datacopy.contactName"></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="联系人电话：" prop="phone">
                  <Input type="text" v-model="form1datacopy.phone"></Input>
                </FormItem>
              </Col>

            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="培训日期：">
                  <DatePicker style="width: 100%" v-model='form1datacopy.receiptDate'></DatePicker>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="参会方式：">
                  <Select v-model="form1datacopy.meetingMode">
                    <Option value="1" lable="视频参会">视频参会</Option>
                    <Option value="2" lable="现场参会">现场参会</Option>
                  </Select>
                </FormItem>
              </Col>

            </Row>
          </Form>
          <Row type="flex" justify="space-around" class="code-row-bg">
            <Col span="23">
              <Button style="margin-top:20px" class="ivu-btn-add" icon="md-add" @click="addPlan()">新增
              </Button>
              <userSelect button-name="批量新增" @setData="setUsers" :singleChoice="false"></userSelect>
            </Col>
          </Row>
          <Row type="flex" justify="space-around" class="code-row-bg">
            <Col span="23">
              <Table class="tableClass" border stripe style="margin-top:20px;overflow-y:auto;" size="small"
                     :height="350" :loading="loading" :columns="planColumn" :data="planDatas">
              </Table>
            </Col>
          </Row>

        </Col>
      </Row>
      <div slot="footer">
        <Button @click="submit('form1datacopy1')" class="ivu-btn-save" :loading="buttonLoading">确定</Button>
        <Button @click="handleCancel" class="ivu-btn-cancel">取消</Button>
      </div>
    </Modal>
    <Modal title="培训回执表修改" :transfer=false v-model="model3" :width=600>
      <Row>
        <Col span="24">
          <Form ref="form1datacopy" :model="form1datacopy" :rules="ruleCustomModify" label-position="top">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="通知公告：" prop="informId">
                  <Input type='text' v-model='form1datacopy.informName' readonly
                         @on-focus="openSelect"></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="单位名称：" prop="receiptOrgId">
                  <cascaderDom class="query-form-el" style="padding-top: 4px;width: 100%"
                               ref="trainOrg"
                               @setOrgInfo="setOrgId" @setOrgname="setOrgName"
                               :currentOrgId="form1datacopy.receiptOrgId"
                               :currentOrgName="form1datacopy.receiptOrgName"
                               :orgTree="true"></cascaderDom>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="联系人：" prop="contactName">
                  <Input type="text" v-model="form1datacopy.contactName"></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="联系人电话：" prop="phone">
                  <Input type="text" v-model="form1datacopy.phone"></Input>
                </FormItem>
              </Col>
            </Row>

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="人员名称：" prop="userName">
                  <Input type="text" v-model="form1datacopy.userName"></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="性别：" prop="nation">
                  <Select v-model="form1datacopy.sex">
                    <Option value="M" lable="男">男</Option>
                    <Option value="F" lable="女">女</Option>
                  </Select>
                  <!--<Input type="text" v-model="form1datacopy.nation"></Input>-->
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="职务：" prop="position">
                  <Input type="text" v-model="form1datacopy.position"></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="民族：" prop="nation">
                  <Input type="text" v-model="form1datacopy.nation"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="部门：" prop="depName">
                  <Input type="text" v-model="form1datacopy.depName"></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="手机：" prop="cellPhone">
                  <Input type="text" v-model="form1datacopy.cellPhone"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="培训日期：">
                  <DatePicker style="width: 100%" v-model='form1datacopy.receiptDate'></DatePicker>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="是否住宿：" prop="accommodation">
                  <Select v-model="form1datacopy.accommodation" style="width:100%">
                    <Option value="1" key="1">是</Option>
                    <Option value="0" key="0">否</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="参会方式：">
                  <Select v-model="form1datacopy.meetingMode">
                    <Option value="1" lable="视频参会">视频参会</Option>
                    <Option value="2" lable="现场参会">现场参会</Option>
                  </Select>
                  <!--<Input type="text" v-model="form1datacopy.nation"></Input>-->
                </FormItem>
              </Col>
              <Col span="11">

              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='备注：'>
                  <Input placeholder="备注" type="textarea"
                         :autosize="{minRows:2,maxRows:5}" v-model='form1datacopy.notes'></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">

        <Button @click="submit('form1datacopy')" class="ivu-btn-save" :loading="buttonLoading">确定</Button>
        <Button @click="handleCancel" class="ivu-btn-cancel">取消</Button>
      </div>
    </Modal>
    <Modal title="培训回执表详情" :transfer=false v-model="model2" :width=700 class="modal-view-detail">
      <Row>
        <Col span="24">
          <Form :model="form1datacopy" :label-width="100">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="单位名称：" prop="receiptOrgName">
                  {{ form1datacopy.receiptOrgName }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="联系人：" prop="contactName">
                  {{ form1datacopy.contactName }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="联系人电话：" prop="phone">
                  {{ form1datacopy.phone }}
                </FormItem>
              </Col>

            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="培训日期：" prop="receiptDate">
                  {{formDateShow(form1datacopy.receiptDate)}}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="通知公告：" prop="informName">
                  {{ form1datacopy.informName }}
                </FormItem>
              </Col>
            </Row>

            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="人员名称：" prop="userName">
                  {{ form1datacopy.userName }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="性别：" prop="sex">
                  {{ form1datacopy.sex === 'M' ? '男' : form1datacopy.sex === 'F' ? '女' : '' }}
                </FormItem>
              </Col>

            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="职务：" prop="position">
                  {{ form1datacopy.position }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="民族：" prop="nation">
                  {{ form1datacopy.nation }}
                </FormItem>
              </Col>

            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="部门：" prop="depName">
                  {{ form1datacopy.depName }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="手机：" prop="cellPhone">
                  {{ form1datacopy.cellPhone }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="创建人：" prop="createUserName">
                  {{ form1datacopy.createUserName }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="填报日期：" prop="createDate">
                  {{ form1datacopy.createDate }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="是否住宿：" prop="accommodation">
                  {{ isAccommodationView(form1datacopy.accommodation) }}
                </FormItem>
              </Col>
              <Col span="11"></Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='备注：'>
                  {{ form1datacopy.notes }}
                </FormItem>
              </Col>
            </Row>
            <!-- <Row type="flex" justify="space-around" class="code-row-bg">
                 <Col span="23">
                     <FormItem label="签到表扫描件：">
                         <div v-show="uploadList.length>0" v-for="item in uploadList" :key='item'>
                             <a @click="downloadFile(form1datacopy.depId,item)">{{ item.fileName }}</a>
                         </div>
                     </FormItem>
                 </Col>
             </Row>-->
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button class='ivu-btn-save' @click="model2=false">关闭</Button>
      </div>
    </Modal>
    <Modal title="选择通知公告" :transfer=false footer-hide v-model="standardSelectModal" :width=900>
      <noticeSelect type="1" ref="selMission" @selectMission="selectReceipt">
      </noticeSelect>
    </Modal>
    <Modal title="批量新增" :transfer=false v-model="model10" :width=900>
      <div style="height: 400px; overflow-y: auto; overflow-x: auto;">
        <Tree ref="auditTree" show-checkbox multiple :data="orderTreeHead"></Tree>
      </div>
      <div slot="footer">
        <Button @click="addSelectplanData()" class="ivu-btn-save" :loading="buttonLoading10">确定</Button>
        <Button @click="addHandleCancel" class="ivu-btn-cancel">取消</Button>
      </div>
    </Modal>
  </layout>
</template>

<script>
import {Api} from '../../../api/index.js'
import {formatDate} from '@/tools/index'
import {sessionStorage} from '../../../common/cacheUtils.js';
import userSelect from "@/views/safe/meeting/user-select.vue"
import noticeSelect from './NoticeSelect.vue'

var cascaderDom = () => import('@/components/cascader-dom.vue');
export default {
  components: {cascaderDom, noticeSelect, userSelect},
  data() {
    return {
      treeListFilter:{},
      orderTreeHead: [
        {
          id: 1,
          loading: false,
          title: '隐患条目',
          expand: false,
          children: []
        }
      ],
      buttonLoading10: false,
      model10: false,
      currentUser: sessionStorage('userId').getObject('userId'),
      buttonLoading: false,
      uploadList: [],
      queryMeetingSelectModal: false,
      loading: false,
      activityForSelectModal: false,
      switchFlag: false,
      form1: {},
      fileUrl: Api.interestedPartiesUserFile,
      standardSelectModal: false,
      //分页参数
      receiptDate: ['', ''],
      pageSizeArray: [10, 20, 50],
      isSpin: false,
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      columns1: [
        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },

        {
          minWidth: 300,
          title: '单位名称',
          align: 'center',
          key: 'receiptOrgName',
        },
        {
          minWidth: 200,
          title: '部门',
          align: 'center',
          key: 'depName',
        },
        /*  {
              minWidth: 150,
              title: '备注',
              align: 'center',
              key: 'notes',
              tooltip:true
          },*/
        {
          minWidth: 100,
          title: '人员姓名',
          align: 'center',
          key: 'userName',
        },
        {
          minWidth: 100,
          title: '参会方式',
          align: 'center',
          key: 'meetingMode',
          render: (h, params) => {
            return h('span', params.row.meetingMode == '1' ? '视频参会' : params.row.meetingMode == '2' ? '现场参会' : '')
          }
        },
        {
          minWidth: 100,
          title: '性别',
          align: 'center',
          key: 'sex',
          render: (h, params) => {
            return h('span', params.row.sex == 'M' ? '男' : params.row.sex == 'F' ? '女' : '')
          }
        },
        {
          minWidth: 100,
          title: '民族',
          align: 'center',
          key: 'nation',
        },
        {
          minWidth: 100,
          title: '是否住宿',
          align: 'center',
          key: 'accommodation',
          render: (h, params) => {
            let key = params.column.key;
            if (!params.row[key]) return "";
            return h('span', params.row[key] === '1' ? '是' : '否');
          }
        },

        {
          minWidth: 100,
          title: '职务',
          align: 'center',
          key: 'position',
        },

        {
          minWidth: 120,
          title: '手机',
          align: 'center',
          key: 'cellPhone',
        },
        {
          minWidth: 100,
          title: '联系人',
          align: 'center',
          key: 'contactName',
        },
        {
          minWidth: 120,
          title: '联系人电话',
          align: 'center',
          key: 'phone',
        },
        {
          minWidth: 120,
          title: '培训日期',
          align: 'center',
          key: 'receiptDate',
          render: (h, params) => {
            if(!params.row.receiptDate) return "--"
            return h('div', [
              (this.formatDate(new Date(params.row.receiptDate), 'yyyy-MM-dd'))
            ]);
          }
        },
        {
          minWidth: 300,
          title: '通知公告',
          align: 'center',
          key: 'informName',
        },

        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 200,
          align: 'center',
          render: (h, params) => {
            if (this.currentUser.loginId === this.Common.admin || this.currentUser.userId === params.row.createUserId || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined
                    ||sessionStorage('userId').getObject('userId').userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined) {

              return h('div', [
                h('A', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    fontSize: '14px'
                  },
                  on: {
                    click: () => {
                      this.showData(params, 1);
                    }
                  }
                }, '详情'),
                h('Divider', {
                  props: {
                    type: 'vertical',
                  }
                }, ''),
                h('A', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    fontSize: '14px'
                  },
                  on: {
                    click: () => {
                      this.showData(params, 2);
                    }
                  }
                }, '修改'),
                h('Divider', {
                  props: {
                    type: 'vertical',
                  }
                }, ''),
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px', color: 'red'},
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '数据删除',
                        content: '<p>确定删除该条信息</p>',
                        okText: '确认',
                        onOk: () => {
                          this.deleteData(params);
                        },
                        cancelText: '取消'
                      });
                    }
                  }
                }, '删除')
              ]);
            } else {
              return h('div', [
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px',},
                  on: {
                    click: () => {
                      this.showData(params, 1);
                    }
                  }
                }, '详情'),
                h('Divider', {props: {type: 'vertical'}}, ''),
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px', color: '#c5c8ce'}
                }, '修改'),
                h('Divider', {props: {type: 'vertical'}}, ''),
                h('A', {
                  props: {type: 'primary', size: 'small'},
                  style: {fontSize: '14px', color: '#c5c8ce'}
                }, '删除')
              ]);
            }

          }
        }
      ],
      ruleCustom: {
        informId: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.informId == null || this.form1datacopy.informId == '' || this.form1datacopy.informId == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        phone: [{
          validator: (rule, value, callback) => {
            if (!(/^1[3456789]\d{9}$/.test(this.form1datacopy.phone))) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        receiptOrgId: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.receiptOrgId == null || this.form1datacopy.receiptOrgId == '' || this.form1datacopy.receiptOrgId == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        contactName: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.contactName == null || this.form1datacopy.contactName == '' || this.form1datacopy.contactName == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        receiptDate: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.receiptDate == null || this.form1datacopy.receiptDate == '' || this.form1datacopy.receiptDate == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
      },
      ruleCustomModify: {
        informId: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.informId == null || this.form1datacopy.informId == '' || this.form1datacopy.informId == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        phone: [{
          validator: (rule, value, callback) => {
            if (!(/^1[3456789]\d{9}$/.test(this.form1datacopy.phone))) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        receiptOrgId: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.receiptOrgId == null || this.form1datacopy.receiptOrgId == '' || this.form1datacopy.receiptOrgId == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        contactName: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.contactName == null || this.form1datacopy.contactName == '' || this.form1datacopy.contactName == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        receiptDate: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.receiptDate == null || this.form1datacopy.receiptDate == '' || this.form1datacopy.receiptDate == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        userName: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.userName == null || this.form1datacopy.userName == '' || this.form1datacopy.userName == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        position: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.position == null || this.form1datacopy.position == '' || this.form1datacopy.position == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        depName: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.depName == null || this.form1datacopy.depName == '' || this.form1datacopy.depName == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        cellPhone: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.cellPhone == null || this.form1datacopy.cellPhone == '' || this.form1datacopy.cellPhone == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],

      },
      form1datacopy: {},
      dataTable: [],
      showdata: {},
      model1: false,
      model2: false,
      model3: false,
      add: false,
      tableHeight: 10,
      file: null,
      fileName: null,
      downloadUrl: Api.downloadMongoFile,
      themeList: [],
      planDatas: [],
      edit: {
        editIndex: -1,  // 当前聚焦的输入框的行数
        userName: '',
        nation: '',
        position: '',
        depName: '',
        cellPhone: '',
        accommodation: '',
        notes: '',
        sex: '',
      },
      planColumn: [
        {
          type: 'index',
          width: 80,
          align: 'center',
          title: '序号',
        },
        {
          title: '姓名',
          minWidth: 100,
          align: 'center',
          slot: 'userName',
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'text',
                value: params.row.userName
              },
              on: {
                'on-change': (event) => {
                  params.row.userName = event.target.value
                  this.planDatas[params.index] = params.row;

                }
              }
            });
          }
        },
        {
          minWidth: 120,
          title: '性别',
          align: 'center',
          slot: 'sex',
          render: (h, params) => {
            return h('Select', {
                  props: {
                    type: 'select',
                    value: params.row.sex
                  },
                  style: {
                    width: '100%',
                    size: 'large'
                  },
                  on: {
                    'on-change': (event) => {
                      console.log(event);
                      params.row.sex = event
                      this.planDatas[params.index] = params.row;
                    }
                  },
                },
                [
                  h('Option', {
                    props: {
                      value: 'M'
                    }
                  }, '男'),
                  h('Option', {
                    props: {
                      value: 'F'
                    }
                  }, '女'),
                ]
            )
          }
        },
        {
          minWidth: 120,
          title: '参会方式',
          align: 'center',
          slot: 'meetingMode',
          render: (h, params) => {
            return h('Select', {
                  props: {
                    type: 'select',
                    value: params.row.meetingMode
                  },
                  style: {
                    width: '100%',
                    size: 'large'
                  },
                  on: {
                    'on-change': (event) => {
                      params.row.meetingMode = event
                      if (event == '1') {
                        params.row.accommodation = '0'
                      }
                      this.planDatas[params.index] = params.row;
                    }
                  },
                },
                [
                  h('Option', {
                    props: {
                      value: '1'
                    }
                  }, '视频参会'),
                  h('Option', {
                    props: {
                      value: '2'
                    }
                  }, '现场参会'),
                ]
            )
          }
        },
        {
          title: '民族',
          minWidth: 100,
          align: 'center',
          slot: 'nation',
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'text',
                value: params.row.nation
              },
              on: {
                'on-change': (event) => {
                  params.row.nation = event.target.value
                  this.planDatas[params.index] = params.row;

                }
              }
            });
          }
        },
        {
          title: '职务',
          minWidth: 120,
          align: 'center',
          slot: 'position',
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'text',
                value: params.row.position
              },
              on: {
                'on-change': (event) => {
                  params.row.position = event.target.value
                  this.planDatas[params.index] = params.row;

                }
              }
            });
          }
        },
        {
          title: '部门',
          minWidth: 120,
          align: 'center',
          slot: 'depName',
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'text',
                value: params.row.depName
              },
              on: {
                'on-change': (event) => {
                  params.row.depName = event.target.value
                  this.planDatas[params.index] = params.row;

                }
              }
            });
          }
        },
        {
          title: '手机',
          minWidth: 120,
          align: 'center',
          slot: 'cellPhone',
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'text',
                value: params.row.cellPhone
              },
              on: {
                'on-change': (event) => {
                  params.row.cellPhone = event.target.value
                  this.planDatas[params.index] = params.row;
                }
              }
            });
          }
        },
        {
          title: '是否住宿',
          slot: 'accommodation',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('Select', {
                  props: {
                    type: 'select',
                    value: params.row.accommodation
                  },
                  style: {
                    width: '100%',
                    size: 'large'
                  },
                  on: {
                    'on-change': (event) => {
                      console.log(event);
                      params.row.accommodation = event
                      this.planDatas[params.index] = params.row;
                    }
                  },
                },

                [
                  h('Option', {
                    props: {
                      value: '1'
                    }
                  }, '是'),
                  h('Option', {
                    props: {
                      value: '0'
                    }
                  }, '否'),
                ]
            )
          }
        },
        {
          minWidth: 200,
          title: '备注',
          align: 'center',
          slot: 'notes',
          tooltip: true,
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'text',
                value: params.row.notes
              },
              on: {
                'on-change': (event) => {
                  params.row.notes = event.target.value
                  this.planDatas[params.index] = params.row;

                }
              }
            });
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          fixed: 'right',
          minWidth: 150,
          render: (h, params) => {
            // if(params.index===this.edit.editIndex){
            //     return h('div', [
            //         h('A', {
            //             props: {
            //                 type: 'primary',
            //                 size: 'small'
            //             },
            //             style: {
            //                 fontSize: '14px'
            //             },
            //             on: {
            //                 click: () => {
            //                     this.handleSave(params.index);
            //                 }
            //             }
            //         }, '保存'),
            //         h('Divider', {
            //             props: {
            //                 type: 'vertical',
            //             }
            //         }, ''),
            //         h('A', {
            //             props: {
            //                 type: 'primary',
            //                 size: 'small'
            //             },
            //             style: {
            //                 color: 'red',
            //                 fontSize: '14px'
            //             },
            //             on: {
            //                 click: () => {
            //                     this.edit.editIndex=-1
            //                 }
            //             }
            //         }, '取消')
            //     ]);
            // }else {
            return h('div', [
              // h('A', {
              //     props: {
              //         type: 'primary',
              //         size: 'small'
              //     },
              //     style: {
              //         fontSize: '14px'
              //     },
              //     on: {
              //         click: () => {
              //             this.handleEdit(params.row, params.index);
              //         }
              //     }
              // }, '编辑'),
              // h('Divider', {
              //     props: {
              //         type: 'vertical',
              //     }
              // }, ''),
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  color: 'red',
                  fontSize: '14px'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '数据删除',
                      content: '<p>确定删除该条信息</p>',
                      okText: '确认',
                      onOk: () => {
                        this.deletePlan(params.index);
                      },
                      cancelText: '取消'
                    });

                  }
                }
              }, '删除')
            ]);
            // }
          }
        }
      ]
    }
  },
  mounted: function () {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    this.query();
    this.selectThemeList();
    this.orderTreeHead = [
      {
        id: this.currentUser.companyId,
        type: '1',
        loading: false,
        title: this.currentUser.companyName,
        expand: false,
        children: []
      }
    ]
  },
  methods: {

    activityForSelectIsTrue() {
      this.activityForSelectModal = true;
    },
    querySelect() {
      this.queryMeetingSelectModal = true

    },
    formDateShow(date){
      if (!date) return ""
      return formatDate(new Date(date), 'yyyy-MM-dd')
    },
    setUsers(data) {

      data.forEach(item => {
        let user = {
          userName: item.userName,
          id: item.userId,
          nation: '',
          position: item.positionName,
          depName: item.orgName,
          cellPhone: item.mobileNumber,
          accommodation: '0',
          notes: '',
          sex: item.sex,
          meetingMode: this.form1datacopy.meetingMode
        }
        this.planDatas.push(user);
      })
    },
    queryMetting(row) {
      this.queryMeetingSelectModal = false;
      this.form1.informId = row.proposalId;
      this.form1.noticName = row.title;
    },
    getActivityData(row) {

      //this.dataForm.saRiskInfo.areaActivity = row.activityId;

      this.form1datacopy.activityThemeId = row.programmeId;
      this.form1datacopy.programmeName = row.programmeName;
      this.form1datacopy.activityTheme = row.themeName;
      //
      this.activityForSelectModal = false;

    },

    selectThemeList() {
      let data = {
        startPage: 1,
        size: 100
      }

      let url = Api.queryProgramme;
      this.$http.get(url, {
        params: data
      }).then((res) => {
        this.themeList = res.data.data.data;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },

    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.query();
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.query();
    },

    copyArray(arr) {
      return JSON.parse(JSON.stringify(arr));
    },
    addPlan() {
      let item = {
        userName: '',
        nation: '',
        position: '',
        depName: '',
        cellPhone: '',
        accommodation: '',
        notes: '',
        sex: '',
      }
      if (this.form1datacopy.meetingMode == '1') {
        item.meetingMode = '1'
        item.accommodation = '0'
      } else if (this.form1datacopy.meetingMode == '2') {
        item.meetingMode = '2'
      }
      this.planDatas.push(item);
    },
    addAll() {
      let _this = this;
      this.orderTreeHead = [
        {
          id: this.currentUser.companyId,
          type: '1',
          loading: true,
          title: this.currentUser.companyName,
          expand: false,
          children: []
        }
      ]
      this.$http.get(Api.meetingReceiptBaseOrgAndUser + "/" + this.currentUser.companyId).then(function (res) {
        if (res.data.status == '200') {
          _this.orderTreeHead =
              [
                {
                  id: this.currentUser.companyId,
                  type: '1',
                  loading: false,
                  title: this.currentUser.companyName,
                  expand: false,
                  children: res.data.data
                }
              ]
        }
      }, function (err) {
        this.$Message.error('请求失败');
      });
      this.model10 = true;
    },
    addSelectplanData() {
      let tree = this.$refs.auditTree.getCheckedNodes();
      this.buttonLoading10 = true;
      if(tree.length != 0){
        tree.forEach(item =>{
          if (item.type == '2'){
            let user = {
              userName: item.title,
              id:item.id,
              nation: '',
              position: '',
              depName: '',
              cellPhone: item.mobileNum,
              accommodation: '',
              notes: '',
              sex: '',
            }
            if (!this.treeListFilter[item.id]){
              this.treeListFilter[item.id] = item.id;
              this.planDatas.push(user);
            }
          }
        })
        this.model10 = false;
      }else{
        this.$Message.warning("请先选择用户")
      }
      this.buttonLoading10 = false;

    },
    addHandleCancel() {
      this.model10 = false;
    },
    switchQuery(flag) {
      this.switchFlag = flag;
      if (this.switchFlag) {
        this.tableHeight = this.tableHeight - 44;
      } else {
        this.tableHeight = this.tableHeight + 44;
      }
    },
    showData(data, flag) {
      this.buttonLoading = false;
      this.form1datacopy = JSON.parse(JSON.stringify(data.row));
      if (this.form1datacopy.receiptDate){
        this.form1datacopy.receiptDate = this.formatDate(new Date(this.form1datacopy.receiptDate), 'yyyy-MM-dd');
      }
      if (flag == 1) {


        // this.getFiles();
        this.model2 = true;
      } else {
        //修改页面
        this.add = false;
        // this.getFiles();
        this.model3 = true;
      }
    },

    getSelectRows(rows) {
      this.deleteRows = rows;
    },

    deleteData(params) {
      let url = Api.deleteReceipt;
      let data = {
        receiptId: params.row.receiptId,
      }
      this.$http.delete(url, {params: data}).then((res) => {
        if (res.data.status == 201) {
          this.$Message.error(res.data.msg);
        } else {
          this.$Message.success("删除成功");
        }
        this.query()
      }).catch(e => {
        this.$Message.error('请求失败' + e);
      })
    },

    query() {
      this.loading = true;
      let data = {
        startPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,
        orgId: sessionStorage('userId').getObject('userId').companyId

      };
      this.loading = true;
      if (this.receiptDate[0] != '' && this.receiptDate[1] != '') {
        this.form1.startDate = this.formatDate(new Date(this.receiptDate[0]), 'yyyy-MM-dd');
        this.form1.endDate = this.formatDate(new Date(this.receiptDate[1]), 'yyyy-MM-dd');
      }

      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));

      let url = Api.queryReceipt;
      this.$http.get(url, {
        params: data
      }).then((res) => {
        this.dataTable = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
        this.loading = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },

    setOrgId(data) {
      this.form1datacopy.receiptOrgId = data[data.length - 1];
    },
    setOrgName(data) {
      this.form1datacopy.receiptOrgName = data;
    },

    setOrgId1(data) {
      this.form1.receiptOrgId = data[data.length - 1];
    },
    setOrgName1(data) {
      this.form1.receiptOrgName = data;
    },
    handleCancel() {
      this.form1datacopy = {};
      this.model1 = false;
      this.model3 = false;
      this.planDatas = [];
    },
    isAccommodationView(data) {
      if (!data) return "";
      return data === '1' ? '是' : '否';
    },
    reset() {
      this.form1 = {}
      this.receiptDate = ['', ''];
      this.$refs.org1.resetCurrentOrg();
      this.$refs.org2.resetCurrentOrg();
      this.query();
    },
    submit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
            if(this.form1datacopy.receiptDate!=undefined && this.form1datacopy.receiptDate!= null && this.form1datacopy.receiptDate!= '')
                this.form1datacopy.receiptDate = this.formatDate(new Date(this.form1datacopy.receiptDate), 'yyyy-MM-dd');
          this.buttonLoading = true;
          let userId = sessionStorage('userId').getObject('userId').userId;
          let orgId = sessionStorage('userId').getObject('userId').orgInfo.orgId;
          if (this.add) {
            let isSubmit = true;
            if (this.planDatas.length != 0) {
              for (let i=0;i < this.planDatas.length;i++ ){
                if (!this.planDatas[i].meetingMode){
                  this.buttonLoading = false;
                  isSubmit = false
                  this.$Message.error("请选择参会方式")
                  break;
                }else if (!this.planDatas[i].accommodation){
                  this.buttonLoading = false;
                  isSubmit = false
                  this.$Message.error("请选择是否住宿");
                  break;
                }
              }
              if (isSubmit){
                for (let i=0;i < this.planDatas.length;i++ ){

                  this.planDatas[i].informId = this.form1datacopy.informId;
                  this.planDatas[i].receiptOrgId = this.form1datacopy.receiptOrgId;
                  this.planDatas[i].receiptOrgName = this.form1datacopy.receiptOrgName;
                  this.planDatas[i].contactName = this.form1datacopy.contactName;
                  this.planDatas[i].receiptDate = this.form1datacopy.receiptDate;
                  this.planDatas[i].phone = this.form1datacopy.phone;
                  this.planDatas[i].depId = this.form1datacopy.depId;
                  this.planDatas[i].createUserId = userId;
                  this.planDatas[i].createOrgId = orgId;
                }
                this.$http.post(Api.saveReceipt, this.planDatas).then((res) => {
                  this.$Message.success("保存成功")
                  this.model1 = false;
                  this.query();
                  this.buttonLoading = false;
                }).catch(e => {
                  this.model1 = false;
                  this.query();
                  this.$Message.error("数据获取失败")
                })
              }

            } else {
              this.buttonLoading = false;
              this.$Message.error("请新增数据")
            }

          } else {
            this.form1datacopy.updateUserId = userId;
            this.form1datacopy.updateOrgId = orgId;
            this.$http.post(Api.updateReceipt, this.form1datacopy).then((res) => {
              this.$Message.success("保存成功")
              this.model3 = false;
              this.query();
              this.buttonLoading = false;
            }).catch(e => {
              this.model3 = false;
              this.query();
              this.$Message.error("数据获取失败")
            })
          }
        } else {
          this.$Message.error('请填报完整!');
        }
      })
    },
    get_uuid() {
      let s = [];
      let hexDigits = "0123456789abcdef";
      for (let i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
      s[8] = s[13] = s[18] = s[23] = "-";

      let uuid = s.join("");
      let reg = new RegExp("-", "g");
      let a = uuid.replace(reg, "");
      console.log(a);
      return a;
    },
    addInfo() {
      let _this = this;
      this.treeListFilter = {};
      this.form1datacopy = {
        depId: this.get_uuid(),
        contactName: sessionStorage('userId').getObject('userId').userName,
        receiptOrgId:sessionStorage('userId').getObject('userId').companyId,
        receiptOrgName:sessionStorage('userId').getObject('userId').companyName,

      };
      this.uploadList = [];
      this.planDatas = [];
      this.add = true;
      this.model1 = true;
    },

    deletePlan(index) {
      let data = this.planDatas[index];
      delete this.treeListFilter[data.id];
      this.planDatas.splice(index, 1);

    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
    downloadFiles() {
      this.isSpin = true;
      let orgId = sessionStorage('userId').getObject('userId').companyId;
      let data = {
        orgId: orgId
      };

      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
      this.$http.get(Api.downloadReceipt, {
        params: data,
        responseType: 'blob'      //告诉服务器我们需要的响应格式
      }).then((res) => {
        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
        });
        aLink.href = URL.createObjectURL(blob)
        aLink.download = "培训回执表(" + formatDate(new Date(), "yyyy-MM-dd") + ").xlsx" //标题
        aLink.click()
        document.body.appendChild(aLink)
        this.isSpin = false;
      })
    },
    /* downloadFile(guideId, file) {
         let url = this.fileUrl + '/file/' + file.id;
         this.$http.get(url, {
             responseType: 'blob'      //告诉服务器我们需要的响应格式
         }).then((res) => {
             const aLink = document.createElement("a");
             let blob = new Blob([res.data], {
                 type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
             });
             aLink.href = URL.createObjectURL(blob)
             aLink.download = file.fileName //标题
             aLink.click()
             document.body.appendChild(aLink)
         })
     },
     remove1(id) {
         console.log(id)
         let url = this.fileUrl + '/file/' + id;
         this.$http.delete(url).then((res) => {
             this.getFiles()
         })
     },
     beforeUpload(file) {
         let formData = new FormData();
         formData.append("files", file); // 文件对象
         let url = this.fileUrl + '/' + this.form1datacopy.depId + '/files/receipt'
         this.$http.post(url, formData).then((res) => {
             if (res.data.result == "success") {
                 this.$Message.info("文件上传成功")
                 this.getFiles();
             }
         })
         return false
     },
     getFiles() {
         let url = this.fileUrl + '/' + this.form1datacopy.depId + '/files/receipt'
         this.$http.get(url).then((res) => {
             if (res.data.result == "success") {
                 this.uploadList = res.data.data
             }
         })
     },*/
    openSelect() {
      this.standardSelectModal = true
    },
    selectReceipt(row) {
      this.standardSelectModal = false;
      this.form1datacopy.informId = row.proposalId;
      this.form1datacopy.informName = row.title;
    },
  },
  watch: {
    "model3": function (qw, er) {
      if (qw && this.model3) {
        setTimeout(() => {
          this.$refs.trainOrg.setCurrentOrg();

        }, 100)
      } else {
        this.$refs.trainOrg.resetCurrentOrg();

      }
    },
    "model1":function(qw,er){
      if(qw && this.model1){
        setTimeout(()=>{
          this.$refs.org.setCurrentOrg();
        },100)
      }else{
        this.$refs.org.resetCurrentOrg();
      }
    },
    "switchFlag": function (qw, er) {
      if (this.switchFlag) {
        setTimeout(() => {
          this.$refs.org1.setCurrentOrg();
          this.$refs.org2.setCurrentOrg();

        }, 100)
      } else {
        setTimeout(() => {
          this.$refs.org1.setCurrentOrg();
          this.$refs.org2.setCurrentOrg();

        }, 100)

      }
    },

  },
}
</script>
<style lang='css' scoped>
@import '../../../index.css';

.tableClass {
}

.tableClass >>> .ivu-table td {
  vertical-align: middle;
}

.tableClass >>> .ivu-table th {
  vertical-align: middle;
}

.tableClass >>> .ivu-input-suffix i {
  font-size: 16px;
  line-height: 50px;
  color: #808695;
}

.tableClass >>> .ivu-input {
  border-radius: 0px;
  vertical-align: middle;
  height: 100%;
}

.tableClass >>> textarea.ivu-input {
  height: 100%;
  vertical-align: middle;
}

.tableClass >>> ivu-date-picker {
  height: 100%;
  vertical-align: middle;
}

.tableClass >>> .ivu-table-cell {
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  box-sizing: border-box;
  height: 100%;
  /*flex 布局*/
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;
  text-align: justify;
}

.tableClass >>> .ivu-date-picker {
  height: 100%;
}

.tableClass >>> .ivu-date-picker {
  height: 100%;
}

.tableClass >>> .ivu-input-wrapper {
  height: 100%;
}

.tableClass >>> .ivu-date-picker-rel {
  height: 100%;
}

.tableClass >>> .ivu-input-icon {
  line-height: 50px;
}

.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
